<template>
  <div>
    <v-header></v-header>
    <div class="line"></div>
    <!--导航栏-->
    <v-menu></v-menu>
    <div class="musicBody">
      <el-container style="margin-top: 40px" class="layout-container-demo">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-scrollbar>
            <el-menu :default-active="activeIndex" @select="handleSelect">
              <el-menu-item index="0-0">全部歌手</el-menu-item>
              <el-menu-item-group title="华语">
                <el-menu-item index="0-1">华语全部歌手</el-menu-item>
                <el-menu-item index="1-1">华语男歌手</el-menu-item>
                <el-menu-item index="2-1">华语女歌手</el-menu-item>
                <el-menu-item index="3-1">华语组合</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="欧美">
                <el-menu-item index="0-2">欧美全部歌手</el-menu-item>
                <el-menu-item index="1-2">欧美男歌手</el-menu-item>
                <el-menu-item index="2-2">欧美女歌手</el-menu-item>
                <el-menu-item index="3-2">欧美组合</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="日韩">
                <el-menu-item index="0-3">日韩全部歌手</el-menu-item>
                <el-menu-item index="1-3">日韩男歌手</el-menu-item>
                <el-menu-item index="2-3">日韩女歌手</el-menu-item>
                <el-menu-item index="3-3">日韩组合</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="其他">
                <el-menu-item index="0-4">其他全部歌手</el-menu-item>
                <el-menu-item index="1-4">其他男歌手</el-menu-item>
                <el-menu-item index="2-4">其他女歌手</el-menu-item>
                <el-menu-item index="3-4">其他组合</el-menu-item>
              </el-menu-item-group>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <!--字母搜索区域-->
          <div class="letterSearch">
            <el-radio-group v-model="tabPosition" @change="letterSearchChange">
              <el-radio-button label="all"></el-radio-button>
              <el-radio-button label="A"></el-radio-button>
              <el-radio-button label="B"></el-radio-button>
              <el-radio-button label="C"></el-radio-button>
              <el-radio-button label="D"></el-radio-button>
              <el-radio-button label="E"></el-radio-button>
              <el-radio-button label="F"></el-radio-button>
              <el-radio-button label="G"></el-radio-button>
              <el-radio-button label="H"></el-radio-button>
              <el-radio-button label="I"></el-radio-button>
              <el-radio-button label="J"></el-radio-button>
              <el-radio-button label="K"></el-radio-button>
              <el-radio-button label="L"></el-radio-button>
              <el-radio-button label="M"></el-radio-button>
              <el-radio-button label="N"></el-radio-button>
              <el-radio-button label="O"></el-radio-button>
              <el-radio-button label="P"></el-radio-button>
              <el-radio-button label="Q"></el-radio-button>
              <el-radio-button label="R"></el-radio-button>
              <el-radio-button label="S"></el-radio-button>
              <el-radio-button label="T"></el-radio-button>
              <el-radio-button label="U"></el-radio-button>
              <el-radio-button label="V"></el-radio-button>
              <el-radio-button label="W"></el-radio-button>
              <el-radio-button label="X"></el-radio-button>
              <el-radio-button label="Y"></el-radio-button>
              <el-radio-button label="Z"></el-radio-button>
            </el-radio-group>
            <!--分割线-->
            <el-divider></el-divider>
          </div>
          <!--歌手头像显示区域-->
          <!--每排8个，一页64个-->
          <ul class="singer_ul"
              v-for="(item,index) in singerInfo.dataList.slice((currentPage-1)*64,((currentPage-1)*64+64))"
              :key="index">
            <li class="singer_li">
              <el-link @click="toSingerDetail(item)">
                <el-image
                  class="singer_el_image"
                  :src="item.imgUrl"
                  fit="fit"
                  placeholder
                ></el-image>
              </el-link>
              <br>
              <strong>
                <el-link @click="toSingerDetail(item)">
                  {{item.singerName}}
                </el-link>
              </strong>
            </li>
          </ul>
          <!--清除样式-->
          <div class="clear"></div>
          <!--分页-->
          <div style="text-align: center">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="singerInfo.pageTotal"
              :page-size="pageSize"
              :current-page="currentPage"
              @current-change="handleCurrentChange"></el-pagination>
          </div>
        </el-main>

      </el-container>
    </div>
  </div>
</template>

<script>
  import header from '../layout/Header.vue'
  import footer from '../layout/Footer.vue'
  import menu from '../layout/Menu.vue'

  export default {
    components: {
      'v-header': header,
      'v-footer': footer,
      'v-menu': menu
    },
    name: "Singer",
    data() {
      return {
        activeIndex: '0-0',
        itemIndex: '0-0',
        singerInfo: {
          dataList: [],
          pageTotal: 0
        },
        tabPosition: 'all',
        currentPage: 1,
        pageSize: 64,
      }
    },
    created() {
      document.title = '歌手风采';
    },
    mounted() {
      this.getSingerInfo();
    },
    methods: {
      toSingerDetail(item){
        console.log(item);
        let index=item.id;
        this.$router.push({
          path: '/singerDetail',
          query: {
            id:index
          }
        })
      },
      handleSelect(item) {
        this.itemIndex = item;
        this.currentPage = 1;
        console.log(this.currentPage);
        this.getSingerInfo()
      },
      handleCurrentChange(item) {
        this.currentPage = item;
        console.log(this.currentPage)
      },
      letterSearchChange(){
        this.currentPage=1;
        this.getSingerInfo();
      },
      getSingerInfo() {
        this.$axios({
          methods: 'get',
          url: '/kugou/singerInfo',
          params: {
            singerType: this.itemIndex,
            singerNameSpell: this.tabPosition,
            singerCurrentPage: this.currentPage,
            singerPageSize: this.pageSize
          }
        }).then(res => {
          console.log(res);
          this.singerInfo = res.data.data.info;
        })
      }
    },
  }
</script>

<style scoped>
  .musicBody {
    width: 1000px;
    margin: 0 auto;
  }

  .textCenter {
    text-align: center;
  }

  .letterSearch {
    color: #303030;
    font-family: Arial;

  }

  .el-link--inner {
    padding: 0 8px;
  }

  .singer_ul {
    list-style-type: none
  }

  .singer_li {
    width: 80px;
    margin: 0 15px 15px 0;
    float: left;
    text-align: center;
  }

  .singer_el_image {
    width: 80px;
    height: 80px;
  }

  .clear {
    clear: both;
  }

  strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /deep/ .el-radio-button__inner {
    padding: 5px 9px;
    font-size: 12px;
    border-radius: 0;
  }
</style>
